<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">

  <title>CSS3隐藏悬浮网站左侧标签式导航栏代码 </title>


  <style type="text/css">
    a:link,
    a:hover,
    a:visited,
    a:active {
      color: #fff;
      text-decoration: none;
    }

    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;

      background: #fff;
    }

    .card-holder {
      position: fixed;
      width: 0px;
      overflow: visible;
    }

    .card-wrapper {
      display: inline-block;
      float: right;
      clear: both;
    }

    .card {
      position: relative;
      left: 32px;
      padding: 16px 32px 16px 64px;
      margin: 8px;
      x-box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.5);
      box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.5);
      background: #fff;
      transition: all 0.3s ease-in-out 0.1s;
    }

    .card:hover {
      position: relative;
      left: 100%;
      margin-left: -32px;
      box-shadow:
        0 -8px 8px -8px rgba(0, 0, 0, 0.5),
        0 8px 8px -8px rgba(0, 0, 0, 0.5);
      transition: all 0.3s ease-in-out;
    }

    .card-content {
      display: inline-block;
      color: #fff;
      font-family: 'Droid Sans', sans-serif;
      font-size: 16px;
      font-weight: bold;
      white-space: nowrap;
    }

    .bg-01 {
      background: #539770;
    }

    .bg-02 {
      background: #4B7D74;
    }

    .bg-03 {
      background: #8DC2BC;
    }

    .bg-04 {
      background: #EDD6B4;
    }

    .bg-05 {
      background: #BE7467;
    }

    .bg-06 {
      background: #E2AE63;
    }
  </style>
</head>

<body>

  <div class='card-holder'>
    <div class='card-wrapper'>
      <a href='#'>
        <div class='card bg-01'>
          <span class='card-content'>标题1</span>
        </div>
      </a>
    </div>
    <div class='card-wrapper'>
      <a href='#'>
        <div class='card bg-02'>
          <span class='card-content'>标题2</span>
        </div>
      </a>
    </div>
    <div class='card-wrapper'>
      <a href='#'>
        <div class='card bg-03'>
          <span class='card-content'>标题3</span>
        </div>
      </a>
    </div>
    <div class='card-wrapper'>
      <a href='#'>
        <div class='card bg-04'>
          <span class='card-content'>标题4</span>
        </div>
      </a>
    </div>
    <div class='card-wrapper'>
      <a href='#'>
        <div class='card bg-05'>
          <span class='card-content'>标题5</span>
        </div>
      </a>
    </div>
    <div class='card-wrapper'>
      <a href='#'>
        <div class='card bg-06'>
          <span class='card-content'>长标题1</span>
        </div>
      </a>
    </div>
  </div>

  <!--以下无正文 转载或者使用请注释出自梦想匣子 

lssfxy.kuaizhan.com-->
  <div style="width:960px;margin:0px auto; clear:both; text-

align:center; ">
    <script src="/statics/js/ad/96090.js" type="text/javascript"></script>
  </div>
  <div style="width:960px;margin:0px auto 0px auto; clear:both; 

text-align:center; font-size:12px; line-height:25px; ">

</body>

</html>


————————————————
版权声明：本文为CSDN博主「小小鱼儿小小林」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_27471405/article/details/78106019